<template>
    <el-menu mode="horizontal" :ellipsis="false" @select="handleSelect">
        <div class="flex-grow" />
        <el-sub-menu index="profileNav">
            <template #title>工号{{ memberNum }}</template>
            <el-menu-item index="changePassword">
                <el-icon>
                    <Setting />
                </el-icon>
                修改密码
            </el-menu-item>
            <el-menu-item index="logout">
                <el-icon>
                    <SwitchButton />
                </el-icon>
                退出登录
            </el-menu-item>
        </el-sub-menu>
    </el-menu>

    <el-dialog v-model="changePasswordDialog" title="修改密码" width="500" align-center>
        <el-form class="change-password-form" :model="changePasswordForm" ref="ruleFormRef" :rules="changePasswordRules">
            <el-form-item label="原始密码" prop="originPassword">
                <el-input type="password" v-model="changePasswordForm.originPassword" placeholder="请输入原始密码" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="changePasswordForm.newPassword" placeholder="请输入新密码[6,10]" />
            </el-form-item>
            <el-form-item style="display: inline-block; margin-top: 10px;">
                <el-button type="primary" @click="handleChangePassword(ruleFormRef)" v-if="!isChanging">修改密码</el-button>
                <el-button type="primary" v-else loading>修&nbsp;改&nbsp;中...</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { changePassword, logout } from '../api/member';
import { getMemberNum, removeMemberId, removeMemberNum, removeToken } from '../utils/cookieUtil';
import router from '../router';

const memberNum = ref('')
onMounted(() => {
    memberNum.value = getMemberNum()
})

const changePasswordDialog = ref(false)

interface ChangePasswordForm {
    originPassword: string,
    newPassword: string
}

const ruleFormRef = ref<FormInstance>()

const changePasswordForm = reactive<ChangePasswordForm>({
    originPassword: '',
    newPassword: ''
})

const changePasswordRules = reactive<FormRules<ChangePasswordForm>>({
    originPassword: [
        {
            required: true,
            message: '原始密码不能为空',
            trigger: 'blur'
        }
    ],
    newPassword: [
        {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
        }
    ]
})

const isChanging = ref(false)

const handleChangePassword = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, _fields) => {
        if (valid) {
            const { originPassword, newPassword } = changePasswordForm
            changePassword(originPassword, newPassword).then(() => {
                ElMessage.success('修改成功，请重新登录')
                removeMemberNum()
                removeMemberId()
                removeToken()
                router.push('/login')
            })
        } else {
            ElMessage({
                message: '请完善信息',
                type: 'error'
            })
        }
    })
}

const handleSelect = (keyPath: string) => {
    if (keyPath === 'changePassword') {
        changePasswordDialog.value = true
    } else {
        ElMessageBox.confirm(
            '你确定要退出登录吗？',
            '退出登录',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            logout().then(() => {
                ElMessage.success('退出登录成功')
                removeMemberNum()
                removeMemberId()
                removeToken()
                router.push('/login')
            })
        }).catch(() => { })
    }

}

watch(changePasswordDialog, (newVal, _oldVal) => {
    if (!newVal) {
        changePasswordForm.originPassword = ''
        changePasswordForm.newPassword = ''
    }
})

</script>
  
<style lang="scss" scoped>
.el-menu {
    height: 63.2px;

}

.flex-grow {
    flex-grow: 1;
}

.el-menu-item {
    align-items: center;
    justify-content: center;
}

.change-password-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-top: 10px;
}

.el-form-item {
    margin-top: 10px;
}

.el-input {
    width: 250px;
}

.change-password-form button {
    width: 270px;
    font-size: 16px;
    height: 36px;
}
</style>